<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Object Profiling Example</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Object Profiling Example</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
    <p>This example shows using the Profiler on all methods in an object. It uses the <code>Y.DOM</code> object
    as the object to be profiled.</p>
</div>

<div class="example">
<div class="bar">div class="bar"</div>
<div class="bar-baz">div class="bar-baz"</div>
<div class="bar ">div class="bar "</div>
<div class=" bar ">div class=" bar "</div>
<div class="bar baz">div class=" bar baz"</div>
<div class="bar2 baz">div class=" bar2 baz"</div>
<div class="foo">div class="foo"</div>
<div class="foo" id="bar">div class="foo" id="bar"</div>
<div class="foo bar baz">div class="foo bar baz"</div>
<p class="bar">p class="bar"</p>
<button id="demo-run">run</button>

<script>
YUI().use('node', 'profiler', function (Y) {

    Y.one('#demo-run').on('click', function(){
        Y.Profiler.registerObject("Y.Node", Y.Node);
        Y.Profiler.registerObject("Y.DOM", Y.DOM);

        var results = Y.Node.all('.bar');
        results.addClass("newclass");

        var report = Y.Profiler.getFullReport(function(data){
            return data.calls > 0;
        });

        Y.Profiler.unregisterObject("Y.Node");
        Y.Profiler.unregisterObject("Y.DOM");

        //output results
        var msg = "";
        for (var func in report){
            msg += (func + "(): Called " + report[func].calls + " times. Avg: " +
                report[func].avg + ", Min: " + report[func].min + ", Max: " + report[func].max) + "\n";
        }
        alert(msg);
    });
});
</script>

</div>

<h2 class="first">Object Profiling Example</h2>
<p>To illustrate using the Profiler on objects, the <code>Y.DOM</code> and <code>Y.Node</code> objects are registered for profiling. This means
that all of the methods on these objects are being profiled. To
illustrate their use, a number of demo elements are added to the markup:</p>
<pre class="code prettyprint">&lt;div class=&quot;bar&quot;&gt;div class=&quot;bar&quot;&lt;&#x2F;div&gt;
&lt;div class=&quot;bar-baz&quot;&gt;div class=&quot;bar-baz&quot;&lt;&#x2F;div&gt;
&lt;div class=&quot;bar &quot;&gt;div class=&quot;bar &quot;&lt;&#x2F;div&gt;
&lt;div class=&quot; bar &quot;&gt;div class=&quot; bar &quot;&lt;&#x2F;div&gt;
&lt;div class=&quot;bar baz&quot;&gt;div class=&quot; bar baz&quot;&lt;&#x2F;div&gt;
&lt;div class=&quot;bar2 baz&quot;&gt;div class=&quot; bar2 baz&quot;&lt;&#x2F;div&gt;
&lt;div class=&quot;foo&quot;&gt;div class=&quot;foo&quot;&lt;&#x2F;div&gt;
&lt;div class=&quot;foo&quot; id=&quot;bar&quot;&gt;div class=&quot;foo&quot; id=&quot;bar&quot;&lt;&#x2F;div&gt;
&lt;div class=&quot;foo bar baz&quot;&gt;div class=&quot;foo bar baz&quot;&lt;&#x2F;div&gt;
&lt;p class=&quot;bar&quot;&gt;p class=&quot;bar&quot;&lt;&#x2F;p&gt;
&lt;button id=&quot;demo-run&quot;&gt;run&lt;&#x2F;button&gt;</pre>

<p>The button is used to run the example. The function being called when the button is clicked is assigned by first
  retrieving a <code>Node</code> instance for the button and then using the <code>on</code> method:</p>
<pre class="code prettyprint">&lt;script&gt;
YUI().use(&#x27;node&#x27;, &#x27;profiler&#x27;, function (Y) {

    Y.one(&#x27;#demo-run&#x27;).on(&#x27;click&#x27;, function(){
        Y.Profiler.registerObject(&quot;Y.Node&quot;, Y.Node);
        Y.Profiler.registerObject(&quot;Y.DOM&quot;, Y.DOM);

        var results = Y.Node.all(&#x27;.bar&#x27;);
        results.addClass(&quot;newclass&quot;);

        var report = Y.Profiler.getFullReport(function(data){
            return data.calls &gt; 0;
        });

        Y.Profiler.unregisterObject(&quot;Y.Node&quot;);
        Y.Profiler.unregisterObject(&quot;Y.DOM&quot;);

        &#x2F;&#x2F;output results
        var msg = &quot;&quot;;
        for (var func in report){
            msg += (func + &quot;(): Called &quot; + report[func].calls + &quot; times. Avg: &quot; +
                report[func].avg + &quot;, Min: &quot; + report[func].min + &quot;, Max: &quot; + report[func].max) + &quot;\\n&quot;;
        }
        alert(msg);
    });
});
&lt;&#x2F;script&gt;</pre>

<p>The function begins be registering <code>Y.DOM</code> and <code>Y.Node</code> with the Profiler. Note that since these objects don't
  exist in the global scope, the second argument is necessary for <code>registerObject()</code>. Then, the <code>Y.Node.all()</code>
  method is called to retrieve nodes for each element with a class of <code>bar</code>. The result of this operation is a <code>NodeList</code>
  object, on which the <code>addClass()</code> method is called. After that, the full report is returned and the objects are unregistered. The last
  step is to output all of the information that was collected. Even though there's only two methods called explicitly in this example,
  the profiled data indicates that several other methods on <code>Y.DOM</code> and <code>Y.Node</code> were called internally to accomplish the
  tasks.</p>

<h2>Complete Example Source</h2>

<pre class="code prettyprint">&lt;div class=&quot;bar&quot;&gt;div class=&quot;bar&quot;&lt;&#x2F;div&gt;
&lt;div class=&quot;bar-baz&quot;&gt;div class=&quot;bar-baz&quot;&lt;&#x2F;div&gt;
&lt;div class=&quot;bar &quot;&gt;div class=&quot;bar &quot;&lt;&#x2F;div&gt;
&lt;div class=&quot; bar &quot;&gt;div class=&quot; bar &quot;&lt;&#x2F;div&gt;
&lt;div class=&quot;bar baz&quot;&gt;div class=&quot; bar baz&quot;&lt;&#x2F;div&gt;
&lt;div class=&quot;bar2 baz&quot;&gt;div class=&quot; bar2 baz&quot;&lt;&#x2F;div&gt;
&lt;div class=&quot;foo&quot;&gt;div class=&quot;foo&quot;&lt;&#x2F;div&gt;
&lt;div class=&quot;foo&quot; id=&quot;bar&quot;&gt;div class=&quot;foo&quot; id=&quot;bar&quot;&lt;&#x2F;div&gt;
&lt;div class=&quot;foo bar baz&quot;&gt;div class=&quot;foo bar baz&quot;&lt;&#x2F;div&gt;
&lt;p class=&quot;bar&quot;&gt;p class=&quot;bar&quot;&lt;&#x2F;p&gt;
&lt;button id=&quot;demo-run&quot;&gt;run&lt;&#x2F;button&gt;

&lt;script&gt;
YUI().use(&#x27;node&#x27;, &#x27;profiler&#x27;, function (Y) {

    Y.one(&#x27;#demo-run&#x27;).on(&#x27;click&#x27;, function(){
        Y.Profiler.registerObject(&quot;Y.Node&quot;, Y.Node);
        Y.Profiler.registerObject(&quot;Y.DOM&quot;, Y.DOM);

        var results = Y.Node.all(&#x27;.bar&#x27;);
        results.addClass(&quot;newclass&quot;);

        var report = Y.Profiler.getFullReport(function(data){
            return data.calls &gt; 0;
        });

        Y.Profiler.unregisterObject(&quot;Y.Node&quot;);
        Y.Profiler.unregisterObject(&quot;Y.DOM&quot;);

        &#x2F;&#x2F;output results
        var msg = &quot;&quot;;
        for (var func in report){
            msg += (func + &quot;(): Called &quot; + report[func].calls + &quot; times. Avg: &quot; +
                report[func].avg + &quot;, Min: &quot; + report[func].min + &quot;, Max: &quot; + report[func].max) + &quot;\n&quot;;
        }
        alert(msg);
    });
});
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Demonstrates basic usage of the Profiler for profiling functions.">
                                        <a href="profiler-simple-example.html">Simple Profiling Example</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Demonstrates usage of the Profiler for profiling objects.">
                                        <a href="profiler-object-example.html">Object Profiling Example</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
